<!doctype html>
<html class="theme-next use-motion theme-next-next2">
<head>
  

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>




  <link rel="stylesheet" type="text/css" href="/hexo/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>


<link rel="stylesheet" type="text/css" href="/hexo/css/main.css?v=0.4.0"/>


    <meta name="description" content="Just a little effort you can create miracles." />




    <meta name="keywords" content="Hexo,next" />



    <link rel="alternate" href="/hexo/atom.xml" title="IMike" type="application/atom+xml" />


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


    <link rel="shorticon icon" type="image/x-icon" href="/hexo/favicon.ico?v=0.4.0" />




  <title> IMike </title>
</head>

<body>
  <div class="container one-column 
   page-home 
">
    <div class="headband"></div>

    <div id="header" class="header">
      <div class="header-inner">
        <h1 class="site-meta">
  <span class="logo-line-before"><i></i></span>
  <a href="/hexo/" class="brand">
      <span class="logo">
        <i class="icon-logo"></i>
      </span>
      <span class="site-title">IMike</span>
  </a>
  <span class="logo-line-after"><i></i></span>
</h1>


  <ul id="menu" class="menu">
    
      
      <li class="menu-item menu-item-home">
        <a href="/hexo/">
          <i class="menu-item-icon icon-home"></i> <br />
          首页
        </a>
      </li>
    
      
      <li class="menu-item menu-item-archives">
        <a href="/hexo/archives">
          <i class="menu-item-icon icon-archives"></i> <br />
          归档
        </a>
      </li>
    
      
      <li class="menu-item menu-item-tags">
        <a href="/hexo/tags">
          <i class="menu-item-icon icon-tags"></i> <br />
          标签
        </a>
      </li>
    
      
      <li class="menu-item menu-item-categories">
        <a href="/hexo/categories">
          <i class="menu-item-icon icon-categories"></i> <br />
          分类
        </a>
      </li>
    
      
      <li class="menu-item menu-item-about">
        <a href="/hexo/about">
          <i class="menu-item-icon icon-about"></i> <br />
          关于
        </a>
      </li>
    
  </ul>


      </div>
    </div>

    <div id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content">
          
            
          

          <div id="posts" class="posts-expand">
            
  
    

  <div class="post post-type-normal ">
    <div class="post-header">

      
      
        <h1 class="post-title">
          
          
            
              <a class="post-title-link" href="/hexo/2015/06/03/css/">
                css清除浮动的技巧
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          
            发表于 2015-06-03
          
        </span>

        
          
            <span class="post-category">
              &nbsp; | &nbsp; 分类于
              
                <a href="/hexo/categories/技术/">技术</a>

                
                

              
            </span>
          
        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/hexo/2015/06/03/css/#comments" >
              <span class="post-comments-count ds-thread-count" data-thread-key="2015/06/03/css/"></span>
            </a>
          </span>
          
        
        
      </div>
    </div>

    
      <div class="post-body">

        
        

        
          
            <h4 id="1、什么是css清除浮动？">1、什么是css清除浮动？</h4><p>在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自定伸长以适应内容的高度，使得内容溢出到外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的css处理，就叫css清除浮动。</p>
<p>引用w3c的例子，news容器没有包围浮动元素<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">.news &#123;</span><br><span class="line">  background-color: gray;</span><br><span class="line">  border: solid <span class="number">1</span>px black;</span><br><span class="line">  &#125;</span><br><span class="line">.news img &#123;</span><br><span class="line">  <span class="built_in">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line">.news p &#123;</span><br><span class="line">  <span class="built_in">float</span>: right;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;div class=<span class="string">"news"</span>&gt;</span><br><span class="line">&lt;img src=<span class="string">"news-pic.jpg"</span> /&gt;</span><br><span class="line">&lt;p&gt;some text&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure></p>
<p><img src="http://7xjgnf.com1.z0.glb.clouddn.com/3478939f-ebde-461b-95d5-82e907655993.jpg" alt="浮动图例："></p>
<h4 id="2、清除浮动的方法">2、清除浮动的方法</h4><h5 id="方法一：使用带clear属性的空元素">方法一：使用带clear属性的空元素</h5><p>在浮动元素后使用一个空元素如<div class="clear"></div>,并在css中赋予.clear{clear:both;}属性即可清理浮动。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">.news &#123;</span><br><span class="line">  background-color: gray;</span><br><span class="line">  border: solid <span class="number">1</span>px black;</span><br><span class="line">  &#125;</span><br><span class="line">.news img &#123;</span><br><span class="line">  <span class="built_in">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line">.news p &#123;</span><br><span class="line">  <span class="built_in">float</span>: right;</span><br><span class="line">  &#125;</span><br><span class="line">.clear &#123;</span><br><span class="line">  clear: both;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;div class=<span class="string">"news"</span>&gt;</span><br><span class="line">&lt;img src=<span class="string">"news-pic.jpg"</span> /&gt;</span><br><span class="line">&lt;p&gt;some text&lt;/p&gt;</span><br><span class="line">&lt;div class=<span class="string">"clear"</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure></p>
<p>优点：简单，代码少，浏览器兼容性好。<br>缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。</p>
<h5 id="方法二：使用css的overflow属性">方法二：使用css的overflow属性</h5><p>给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在IE6中还需要触发hasLayout,例如为父元素设置容器宽度或设置zoom:1.<br>在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">.news &#123;</span><br><span class="line">  background-color: gray;</span><br><span class="line">  border: solid <span class="number">1</span>px black;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  *zoom: <span class="number">1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">.news img &#123;</span><br><span class="line">  <span class="built_in">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line">.news p &#123;</span><br><span class="line">  <span class="built_in">float</span>: right;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;div class=<span class="string">"news"</span>&gt;</span><br><span class="line">&lt;img src=<span class="string">"news-pic.jpg"</span> /&gt;</span><br><span class="line">&lt;p&gt;some text&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h5 id="方法三：给浮动的元素的容器添加浮动">方法三：给浮动的元素的容器添加浮动</h5><p>给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。</p>
<h5 id="方法四：使用邻接元素处理">方法四：使用邻接元素处理</h5><p>什么都不做，给浮动元素后面的元素添加clear属性。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">.news &#123;</span><br><span class="line">  background-color: gray;</span><br><span class="line">  border: solid <span class="number">1</span>px black;</span><br><span class="line">  &#125;</span><br><span class="line">.news img &#123;</span><br><span class="line">  <span class="built_in">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line">.news p &#123;</span><br><span class="line">  <span class="built_in">float</span>: right;</span><br><span class="line">  &#125;</span><br><span class="line">.content&#123;</span><br><span class="line">  clear:both;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;div class=<span class="string">"news"</span>&gt;</span><br><span class="line">&lt;img src=<span class="string">"news-pic.jpg"</span> /&gt;</span><br><span class="line">&lt;p&gt;some text&lt;/p&gt;</span><br><span class="line">&lt;div class=<span class="string">"content"</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h5 id="方法五：使用css的:after伪元素">方法五：使用css的:after伪元素</h5><p>结合:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和IEhack，可以完美兼容当前主流的各大浏览器，这里的IEhack指的是触发hasLayout。给浮动元素的容器添加一个clearfix的class，当然给这个class添加一个:after伪元素市县元素末尾添加一个看不见的块元素清理浮动。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">.news &#123;</span><br><span class="line">  background-color: gray;</span><br><span class="line">  border: solid <span class="number">1</span>px black;</span><br><span class="line">  &#125;</span><br><span class="line">.news img &#123;</span><br><span class="line">  <span class="built_in">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line">.news p &#123;</span><br><span class="line">  <span class="built_in">float</span>: right;</span><br><span class="line">  &#125;</span><br><span class="line">.clearfix:after&#123;</span><br><span class="line">  display:block;</span><br><span class="line">  content:<span class="string">""</span>;</span><br><span class="line">  clear:both;</span><br><span class="line">  height:<span class="number">0</span>;</span><br><span class="line">  visibility:hidden;</span><br><span class="line">  &#125;</span><br><span class="line">.clearfix &#123;</span><br><span class="line">  /* 触发 hasLayout */ </span><br><span class="line">  zoom: <span class="number">1</span>; </span><br><span class="line">  &#125;</span><br><span class="line">&lt;div class=<span class="string">"news clearfix"</span>&gt;</span><br><span class="line">&lt;img src=<span class="string">"news-pic.jpg"</span> /&gt;</span><br><span class="line">&lt;p&gt;some text&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>通过css伪元素在容器的内部元素最后添加一个看不见的空格“020”或点“.”，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1；触发hasLayout。</p>
<p>总结<br>通过上面的例子，我们不难发现清除浮动的方法可以分成两类：<br>一是利用clear属性，包括在浮动元素末尾添加一个带有clear:both属性的空div来闭合元素，其实利用：after伪元素的方法也是在元素末尾添加一个内容为一个点并带有clear：both属性的元素实现的。<br>二是触发浮动元素父元素的BFC（Block Formatting Contexts，块级格式化上下文），使到该父元素可以包含浮动元素，关于这一点。</p>
<p>推荐<br>在网页主要布局时使用：after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow：hidden（留意可能产生的隐藏溢出的问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素处理之前的浮动。</p>
<p>最后可以使用相对完美的：after伪元素方法清理浮动，文档结构更加清晰。</p>
<p>最简单的一种也是消耗最小的一种：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:before,</span><br><span class="line">.clearfix:after &#123;</span><br><span class="line">    content: <span class="string">" "</span>;</span><br><span class="line">    display: table;</span><br><span class="line">&#125;</span><br><span class="line">.clearfix:after &#123;</span><br><span class="line">    clear: both;</span><br><span class="line">&#125;</span><br><span class="line">.clearfix &#123;</span><br><span class="line">    *zoom: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

          
        
      </div>
    

    
      <div class="post-footer">
        
          <div class="post-tags">
            
              <a href="/hexo/tags/css/">
                #css
              </a>
            
              <a href="/hexo/tags/html/">
                #html
              </a>
            
          </div>
        

        

        
        
          <div class="post-eof"></div>
        
      </div>
    
  </div>


  
    

  <div class="post post-type-normal ">
    <div class="post-header">

      
      
        <h1 class="post-title">
          
          
            
              <a class="post-title-link" href="/hexo/2015/06/02/hexo/">
                hexo 博客
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          
            发表于 2015-06-02
          
        </span>

        
          
            <span class="post-category">
              &nbsp; | &nbsp; 分类于
              
                <a href="/hexo/categories/blog/">blog</a>

                
                

              
            </span>
          
        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/hexo/2015/06/02/hexo/#comments" >
              <span class="post-comments-count ds-thread-count" data-thread-key="2015/06/02/hexo/"></span>
            </a>
          </span>
          
        
        
      </div>
    </div>

    
      <div class="post-body">

        
        

        
          
            <p>最近想写博客了，在网上找了很久的框架，直到有一天遇到了hexo，感觉太美好了。因为他是基于nodejs的、轻量级框架。根据前辈们的一些博客，渐渐的熟悉了hexo，并且搭建起来了。这里我也不写怎么搭建了，大家可以去参考前辈们的博客：<a href="http://zipperary.com/2013/05/28/hexo-guide-1/" target="_blank" rel="external">Zippera’s blog</a>以及<a href="http://ibruce.info/2013/11/22/hexo-your-blog/" target="_blank" rel="external">不如</a></p>
<p>这是只是讲一下自己在搭建过程中遇到的一些问题仅供大家参考：</p>
<p>首先还是需要你安装nodejs以及git<br>然后生成sshkey，然后验证，这时候可能会有一个问题Permission denied<br>只是后你需要：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">eval</span> <span class="string">"<span class="variable">$(ssh-agent -s)</span>"</span></span><br></pre></td></tr></table></figure></p>
<p>下面是就安装hexo了<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo</span><br><span class="line">//然后初始化</span><br><span class="line">hexo init</span><br><span class="line">//这个地方需要注意的是一定要在你存在hexo的目录下初始化（D:/hexo）</span><br><span class="line">//之后在下载npm依赖包</span><br><span class="line">npm install</span><br><span class="line">//之后在就是配置你的hexo了，请参考上面的博客，然后关联github</span><br><span class="line">//最新的hexo关联github时<span class="built_in">type</span>：git</span><br><span class="line">//配置好之后，执行下面的命令</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br><span class="line">//此时你发现会报错，因为少了git依赖包</span><br><span class="line">npm install hexo-deployer-git --save</span><br><span class="line">//然后在执行</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure></p>
<p>之后就差不多了，你就可以开始写博客了。<br>这算是我的第一篇博客，写的不好，希望大家支持，以后会更好。</p>
<h3 id="参考文献">参考文献</h3><p><a href="http://zipperary.com/2013/05/28/hexo-guide-1/" target="_blank" rel="external">Zippera’s blog</a><br><a href="http://ibruce.info/2013/11/22/hexo-your-blog/" target="_blank" rel="external">不如</a></p>

          
        
      </div>
    

    
      <div class="post-footer">
        
          <div class="post-tags">
            
              <a href="/hexo/tags/博客，文章/">
                #博客，文章
              </a>
            
          </div>
        

        

        
        
          <div class="post-eof"></div>
        
      </div>
    
  </div>


  

          </div>

          
        </div>

        
<div class="sidebar-toggle">
  <div class="sidebar-toggle-line-wrap">
    <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
    <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
    <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
  </div>
</div>

<div id="sidebar" class="sidebar">
  <div class="sidebar-inner">

    

    <div class="site-overview">
      <div class="site-author motion-element">
        <img class="site-author-image" src="/hexo/images/default_avatar.jpg" alt="IMike" />
        <p class="site-author-name">IMike</p>
      </div>
      <p class="site-description motion-element">Just a little effort you can create miracles.</p>
      <div class="site-state motion-element">
        <div class="site-state-item site-state-posts">
          <span class="site-state-item-count">2</span>
          <span class="site-state-item-name">日志</span>
        </div>
        <div class="site-state-item site-state-tags">
            <span class="site-state-item-count">3</span>
            <span class="site-state-item-name">标签</span>
        </div>
        <div class="site-state-item site-state-pages">
            <span class="site-state-item-count">3</span>
            <span class="site-state-item-name">页面</span>
        </div>
      </div>

      
        <div class="feed-link motion-element">
          <a href="/hexo/atom.xml">
            <i class="menu-item-icon icon-feed"></i>
            RSS
          </a>
        </div>
      

      <div class="links-of-author motion-element">
        
          
            <span class="links-of-author-item">
              <a href="http://github.com/essencemike">GitHub</a>
            </span>
          
        
      </div>

      
      

    </div>

    

  </div>
</div>


      </div>
    </div>

    <div id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">
  
  &copy; &nbsp; 
  2015
  <span class="with-love">
    <i class="icon-heart"></i>
  </span>
  <span class="author">IMike</span>
</div>
亲，你是第<span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span>个访问我博客的小伙伴，希望对你有所帮助。<br/>
<div class="powered-by">
  由 <a class="theme-link" href="http://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>



      </div>
    </div>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/hexo/vendors/jquery/index.js?v=2.1.3"></script>
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
  

  
  <script type="text/javascript" src="/hexo/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".fancybox").fancybox();
    });
  </script>

  <script type="text/javascript">
  function hasMobileUA () {
    var nav = window.navigator;
    var ua = nav.userAgent;
    var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;

    return pa.test(ua);
  }

  function isDesktop () {
    return screen.width > 991 && !hasMobileUA();
  }

  function isTablet () {
    return screen.width < 992 && screen.width > 767 && hasMobileUA();
  }

  function isMobile () {
    return screen.width < 767 && hasMobileUA();
  }

  function escapeSelector (selector) {
    return selector.replace(/[!"$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&")
  }
</script>

  

  <script type="text/javascript" src="/hexo/vendors/velocity/velocity.min.js"></script>
  <script type="text/javascript" src="/hexo/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" id="motion.global">
  $(document).ready(function () {
    var body = $('body');
    var isSidebarVisible = false;
    var sidebarToggle = $('.sidebar-toggle');
    var sidebarToggleLine1st = $('.sidebar-toggle-line-first')
    var sidebarToggleLine2nd = $('.sidebar-toggle-line-middle');
    var sidebarToggleLine3rd = $('.sidebar-toggle-line-last');
    var sidebar = $('.sidebar');

    var SIDEBAR_WIDTH = '320px';
    var SIDEBAR_DISPLAY_DURATION = 300;

    var sidebarToogleLineStatusInit = {width: '100%', opacity: 1, left: 0, rotateZ: 0, top: 0};

    var sidebarToggleLine1stStatusInit = sidebarToogleLineStatusInit;
    var sidebarToggleLine1stStatusArrow = {width: '50%', rotateZ: '-45deg', top: '2px'};
    var sidebarToogleLine1stStatusClose = {width: '100%', rotateZ: '-45deg', top: '5px'};

    var sidebarToggleLine2ndStatusInit = sidebarToogleLineStatusInit;
    var sidebarToggleLine2ndStatusArrow = {width: '90%'};
    var sidebarToogleLine2ndStatusClose = {opacity: 0};

    var sidebarToggleLine3rdStatusInit = sidebarToogleLineStatusInit;
    var sidebarToggleLine3rdStatusArrow = {width: '50%', rotateZ: '45deg', top: '-2px'};
    var sidebarToogleLine3rdStatusClose = {width: '100%', rotateZ: '45deg', top: '-5px'};

    LogoAndMenuMotion();
    sidebatToggleMotion();
    postsListMotion();
    backToTopMotion();


    $(document)
      .on('sidebar.isShowing', function () {
        isDesktop() && body.velocity(
          {paddingRight: SIDEBAR_WIDTH},
          SIDEBAR_DISPLAY_DURATION
        );
        sidebarContentMotion();
      })
      .on('sidebar.isHiding', function () {});

    function LogoAndMenuMotion() {
      $.Velocity.RunSequence([
        { e: $('.brand'), p: { opacity: 1 }, o: { duration: 100 } },
        { e: $('.logo'), p: { opacity: 1, top: 0 }, o: { duration: 50} },
        
        { e: $('.logo-line-before i'), p: { translateX: "100%" }, o: { duration: 500, sequenceQueue: false } },
        { e: $('.logo-line-after i'), p: { translateX: "-100%" }, o: { duration: 500, sequenceQueue: false } },
        
        { e: $('.site-title'), p: { opacity: 1, top: 0 }, o: { duration: 200 } }
      ]);
      $('.menu-item').velocity('transition.slideDownIn', {display: null});
    }


    function backToTopMotion () {
      var b2top = $('.back-to-top');
      b2top.on('click', function () {
        body.velocity('scroll');
      });
    }

    function sidebarShowMotion () {

      sidebarToggleLine1st.velocity(sidebarToogleLine1stStatusClose);
      sidebarToggleLine2nd.velocity(sidebarToogleLine2ndStatusClose);
      sidebarToggleLine3rd.velocity(sidebarToogleLine3rdStatusClose);

      sidebar.velocity({width: SIDEBAR_WIDTH}, {
        display: 'block',
        duration: SIDEBAR_DISPLAY_DURATION,
        complete: function () {
          sidebar.addClass('sidebar-active');
          sidebar.trigger('sidebar.didShow');
        }
      });
      sidebar.trigger('sidebar.isShowing');
    }

    function sidebarHideMotion () {
      isDesktop() && body.velocity({paddingRight: 0});
      sidebar.velocity('reverse');

      sidebarToggleLine1st.velocity(sidebarToggleLine1stStatusInit);
      sidebarToggleLine2nd.velocity(sidebarToggleLine2ndStatusInit);
      sidebarToggleLine3rd.velocity(sidebarToggleLine3rdStatusInit);

      sidebar.removeClass('sidebar-active');
      sidebar.trigger('sidebar.isHiding');
    };

    function sidebarContentMotion () {
      $('.sidebar .motion-element').velocity(
        'transition.slideRightIn',
        {stagger: 50, drag: true}
      );
    }

    function postsListMotion () {
      var postMotionOptions = window.postMotionOptions || {stagger: 300, drag: true};
      $('.post').velocity('transition.slideDownIn', postMotionOptions);
    }

    function sidebatToggleMotion () {
      sidebarToggle.on('click', function () {
        isSidebarVisible ? sidebarHideMotion() : sidebarShowMotion();
        isSidebarVisible = !isSidebarVisible;
      });

      sidebarToggle.hover(function () {
        if (isSidebarVisible) {return}
        sidebarToggleLine1st.velocity('stop').velocity(sidebarToggleLine1stStatusArrow);
        sidebarToggleLine2nd.velocity('stop').velocity(sidebarToggleLine2ndStatusArrow);
        sidebarToggleLine3rd.velocity('stop').velocity(sidebarToggleLine3rdStatusArrow);
      }, function () {
        if (isSidebarVisible) {return}
        sidebarToggleLine1st.velocity('stop').velocity(sidebarToggleLine1stStatusInit);
        sidebarToggleLine2nd.velocity('stop').velocity(sidebarToggleLine2ndStatusInit);
        sidebarToggleLine3rd.velocity('stop').velocity(sidebarToggleLine3rdStatusInit);
      });
    }
  });

</script>





  

  

  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"IMike"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
  
</body>
</html>
